<template>
	<view class="pics">
		<u-skeleton
			:rows="20"
			title
			:loading="loadingList"
		></u-skeleton>
		
		<view v-if="!loadingList">
			<view class="list">
				<view 
					v-for="(item, index) in listArr" 
					:key="index" 
					class="item">
					<image 
						@click="preview(index)" 
						:src="item.url" 
						class="item-image" 
						mode="aspectFill"></image>
					<view v-if="isManage" @click="deletePic(index, item)" class="iconbox">
						<u-icon class="icon" name="close" color="#fff" style="font-size: 20rpx;"></u-icon>
					</view>
				</view>
			</view>
			
			<view v-if="!listArr.length" class="emptyBox">
				 <u-image src="http://cdn.uviewui.com/uview/empty/data.png"></u-image>
				<view class="txt u-tips-color">还没有图片，赶紧去添加吧</view>
			</view>
			
			<view v-if="listArr.length" class="loadmore">
				<u-loadmore :status="loadstatus" />
			</view>
			
			<view v-if="hasLogin" class="goAdd toManage" @click="changeManage">
				<u-icon :name="isManage ? 'lock-open' : 'lock'" size="26" color="#fff"></u-icon>
			</view>
			
			<view v-if="hasLogin" class="goAdd" @click="toEdit">
				<u-icon name="plus" size="20" color="#fff"></u-icon>
			</view>
		</view>
		
		<!-- <u-back-top :scroll-top="scrollTop" bottom="180rpx" z-index="99"></u-back-top> -->
	</view>
</template>

<script>
	import { 
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	export default {
		data() {
			return {
				scrollTop: 0,
				loadstatus: 'loadmore',
				loadingList: true,
				isManage: false,
				listArr: [],
				pagesize: 10
			}
		},
		computed: {
			hasLogin() {
				return store.hasLogin
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReady() {
			uni.$on('refreshPics', () => {
				this.getData(true)
			})
		},
		onReachBottom() {
			if (this.loadstatus == 'nomore') return
			this.getData()
		},
		onPullDownRefresh() {
			this.getData(true)
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(isFresh) {
				this.loadstatus = 'loading'
				if (isFresh) {
					this.listArr = []
					this.isManage = false
					this.loadingList = true
				}
				db.collection('hxs-pics').limit(this.pagesize).skip(this.listArr.length).orderBy('posttime', 'desc').get().then(res => {
					this.listArr = [...this.listArr, ...res.result.data]
					if (res.result.data.length < this.pagesize) {
						this.loadstatus = 'nomore'
					}
				}).finally(() => {
					this.loadingList = false
					uni.stopPullDownRefresh()
				})
			},
			preview(index) {
				let urls = this.listArr.map(item => item.url)
				uni.previewImage({
					current: index,
					urls,
					indicator: 'number',
					longPressActions: {
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg)
						}
					}
				})
			},
			deletePic(index, item) {
				let _this = this
				uni.showModal({
					title: '删除提醒',
					content: '确定要删除该张图片吗？',
					success(cc) {
						if (cc.confirm) {
							db.collection('hxs-pics').doc(item._id).remove().then(res => {
								_this.listArr.splice(index, 1)
								uni.$u.toast('删除成功')
							}).catch(() => {
								uni.$u.toast('操作失败')
							})
						}
					}
				})
			},
			changeManage() {
				this.isManage = !this.isManage
			},
			toEdit() {
				uni.navigateTo({
					url: '/pages/edit-pic/edit-pic'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.pics {
	padding: 30rpx 30rpx 0;
}
.list {
	display: flex;
	flex-wrap: wrap;
	margin-right: -30rpx;
	.item {
		display: flex;
		width: calc(50% - 30rpx);
		margin: 0 30rpx 30rpx 0;
		position: relative;
		&-image {
			width: 100%;
			height: 400rpx;
		}
	}
}
.goAdd {
	background: $u-primary;
}
.toManage {
	background: #ff9900;
	box-shadow: 0 0 20rpx rgba(255, 153, 0, .7);
	/* #ifdef H5 */
	bottom: calc(230rpx + env(safe-area-inset-bottom) / 2);
	/* #endif */
	/* #ifdef MP-WEIXIN */
	bottom: calc(170rpx + env(safe-area-inset-bottom) / 2);
	/* #endif */
}
.iconbox {
	width: 40rpx;
	height: 40rpx;
	.icon {
		transform: scale(0.5);
	}
}
.loadmore {
	padding: 0 0 30rpx;
}
</style>
